/*
  学习目标：hooks补充-useLocation和useParams
  作用: 
    useLocation 获取location对象, 
    等同于props.location, 任意函数式组件中都可以使用

    useParams 获取 动态路由参数
    等同于props.match.params, 任意函数式组件中都可以使用

*/
import React from "react";
import {
  BrowserRouter as Router,
  Route,
  Switch,
  useLocation,
  useParams,
} from "react-router-dom";

export default function App() {
  return (
    <Router>
      <Switch>
        <Route component={Header} path="/header" />
        <Route component={Footer} path="/footer/:xxx" />
      </Switch>
    </Router>
  );
}
function Footer(props) {
  // const location = useLocation();

  // console.log("location  ----->  ", location);

  const params = useParams();
  console.log("params  ----->  ", params);

  return (
    <>
      <h1>Footer</h1>
      <button>点我跳转到header</button>
    </>
  );
}

function Header() {
  const location = useLocation();
  console.log("location  ----->  ", location);
  return <h1>Header</h1>;
}
